<template>
  <div>
    <div>
      <el-row class="bgc">
        <el-col :span="24"> 财务指标</el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableList">
        <el-table-column label="时期类型" align="center" prop="periodType" :show-overflow-tooltip="true" />
        <el-table-column label="存货" align="center" prop="stock" :show-overflow-tooltip="true" />
        <el-table-column label="应收账款" align="center" prop="accountsReceiv" :show-overflow-tooltip="true" />
        <el-table-column label="应付账款" align="center" prop="accountsPayable" :show-overflow-tooltip="true" />
        <el-table-column label="预收账款" align="center" prop="accountsReadyReceiv" :show-overflow-tooltip="true" />
        <el-table-column label="预付账款" align="center" prop="accountsReadyPayable" :show-overflow-tooltip="true" />
        <el-table-column label="总资产" align="center" prop="totalAssets" :show-overflow-tooltip="true" />
        <el-table-column label="总负债" align="center" prop="totalLiabilities" :show-overflow-tooltip="true" />
        <el-table-column label="营业总收入" align="center" prop="totalIncome" :show-overflow-tooltip="true" />
        <el-table-column label="营业总成本" align="center" prop="totalCost" :show-overflow-tooltip="true" />
        <el-table-column label="营业总利润" align="center" prop="operatingProfit" :show-overflow-tooltip="true" />
        <el-table-column label="利润总额" align="center" prop="grossProfit" :show-overflow-tooltip="true" />
        <el-table-column label="所得税" align="center" prop="incomeTax" :show-overflow-tooltip="true" />
        <el-table-column label="净利润" align="center" prop="netProfit" :show-overflow-tooltip="true" />
        <el-table-column label="营业利润率" align="center" prop="operatingProfitMargin" :show-overflow-tooltip="true" />
        <el-table-column label="净利率" align="center" prop="netProfitMargin" :show-overflow-tooltip="true" />
      </el-table>
    </div>
    <div>
      <el-row class="bgc">
        <el-col :span="24"> 营运资金需求量信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="160px" :model="workCapital" :inline="true">
        <el-form-item label="存货周转天数">
          <el-input v-model="workCapital.daysInventoryTurnover" disabled />
        </el-form-item>
        <el-form-item label="应收账款周转天数">
          <el-input v-model="workCapital.daysTurnoverAccountsReceiv" disabled />
        </el-form-item>
        <el-form-item label="应付账款周转天数">
          <el-input v-model="workCapital.daysTurnoverAccountsPayable" disabled> </el-input>
        </el-form-item>
        <el-form-item label="预付账款周转天数">
          <el-input v-model="workCapital.daysTurnoverAccountsReadyReceiv" disabled> </el-input>
        </el-form-item>
        <el-form-item label="预收账款周转天数">
          <el-input v-model="workCapital.daysTurnoverAccountsReadyPayable" disabled />
        </el-form-item>
        <el-form-item label="营运资金周转次数">
          <el-input v-model="workCapital.daysTurnoverWorkCapital" disabled />
        </el-form-item>
        <el-form-item label="上午营业额">
          <el-input v-model="workCapital.lastYearTurnover" disabled>
            <template #append>
              <span>元</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="上年营业成本">
          <el-input v-model="workCapital.lastYearCost" disabled>
            <template #append>
              <span> 元</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="预计本年营业额增长率">
          <el-input v-model="workCapital.thisYearTurnoverUp" disabled>
            <template #append>
              <span> %</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="营运资金量">
          <el-input v-model="workCapital.amountWorkCapital" disabled>
            <template #append>
              <span> 元</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="担保人自有资金">
          <el-input v-model="workCapital.amountLoanor" disabled> </el-input>
        </el-form-item>
        <el-form-item label="现有流动资金担保">
          <el-input v-model="workCapital.workCapitalLoan" disabled> </el-input>
        </el-form-item>
        <el-form-item label="其他渠道营运资金">
          <el-input v-model="workCapital.workCapitalOther" disabled> </el-input>
        </el-form-item>
        <el-form-item label="新增流动资金担保额度">
          <el-input v-model="workCapital.newWorkCapitalLoan" disabled>
            <template #append>
              <span> 元</span>
            </template>
          </el-input>
        </el-form-item>
        <el-row class="bgc">
          <el-col :span="24"> 影像采集</el-col>
        </el-row>
        <div class="box_flex">
          <div class="box" v-for="(item, index) in imgList" :key="index">
            <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
            <div v-else class="img_box">暂无图片</div>
          </div>
        </div>
      </el-form>
    </div>
    <div>
      <el-row class="bgc">
        <el-col :span="24"> 近1年经营流水(经营相关流水)</el-col>
      </el-row>
      <el-row class="bgc">
        <el-col :span="24"> 交易账户基本信息</el-col>
      </el-row>
      <div v-for="(item, index) in operatingJournals" :key="index">
        <el-form :label-position="labelPosition" label-width="160px" :model="item" :inline="true">
          <el-form-item label="流水类别">
            <el-input v-model="item.flowType" disabled />
          </el-form-item>
          <el-form-item label="账户类别">
            <el-input v-model="item.accountType" disabled />
          </el-form-item>
          <el-form-item label="交易账户名称">
            <el-input v-model="item.accountName" disabled> </el-input>
          </el-form-item>
          <el-form-item label="账户开立日期">
            <el-input v-model="item.accountOpenDate" disabled> </el-input>
          </el-form-item>
          <el-form-item label="交易账户/卡号">
            <el-input v-model="item.accountNo" disabled />
          </el-form-item>
          <el-form-item label="首笔进账日期">
            <el-input v-model="item.firstReceiptDate" disabled />
          </el-form-item>
          <el-form-item label="交易账户所在行">
            <el-input v-model="item.tradBank" disabled />
          </el-form-item>
          <el-form-item label="最近一笔进账日期">
            <el-input v-model="item.latelyReceiptDate" disabled />
          </el-form-item>
          <el-form-item label="是否本行">
            <el-input v-model="item.isLocalbank" disabled />
          </el-form-item>
          <el-row class="bgc">
            <el-col :span="24"> 影像采集</el-col>
          </el-row>
          <div class="box_flex">
            <div class="box" v-for="(item, index) in srcList" :key="index">
              <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
              <div v-else class="img_box">暂无图片</div>
            </div>
          </div>
        </el-form>
        <el-row class="bgc">
          <el-col :span="24">近1年交易流水明细</el-col>
        </el-row>
        <el-row>
          <div class="table-css">
            <div>第1月</div>
            <div>{{ item.january }}</div>
          </div>
          <div class="table-css">
            <div>第2月</div>
            <div>{{ item.february }}</div>
          </div>
          <div class="table-css">
            <div>第3月</div>
            <div>{{ item.march }}</div>
          </div>
          <div class="table-css">
            <div>第4月</div>
            <div>{{ item.april }}</div>
          </div>
          <div class="table-css">
            <div>第5月</div>
            <div>{{ item.may }}</div>
          </div>
          <div class="table-css">
            <div>第6月</div>
            <div>{{ item.june }}</div>
          </div>
          <div class="table-css">
            <div>第7月</div>
            <div>{{ item.july }}</div>
          </div>
          <div class="table-css">
            <div>第8月</div>
            <div>{{ item.august }}</div>
          </div>
          <div class="table-css">
            <div>第9月</div>
            <div>{{ item.september }}</div>
          </div>
          <div class="table-css">
            <div>第10月</div>
            <div>{{ item.october }}</div>
          </div>
          <div class="table-css">
            <div>第11月</div>
            <div>{{ item.november }}</div>
          </div>
          <div class="table-css">
            <div>第12月</div>
            <div>{{ item.december }}</div>
          </div>
          <div class="table-last">
            <div>近一年合计</div>
            <div>{{ item.annualTotal }}</div>
          </div>
          <div class="table-last">
            <div>近一年账户结息总额</div>
            <div>{{ item.interestTotal }}</div>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup name="Gen">
import { Search } from "@element-plus/icons-vue";
import { reactive, ref, nextTick } from "vue";
import { queryOrgTree } from "@/api/org";
import { onMounted } from "vue";
import { ElMessageBox, ElTree } from "element-plus";

const treeRef = ref();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const loading = ref(false);

const labelPosition = ref("right");
const state = reactive({
  loanInfo: [], //担保信息
  togetherInfoList: {},
  otherAssets: {},
  workCapital: {},
  operatingJournals: [],
  carInfoList: {},
  lists: [], //展示菜单项
  imgList: [], //展示菜单项
  srcList: [], //展示菜单项srcList
});
const { loanInfo, workCapital, operatingJournals, otherAssets, imgList, srcList } = toRefs(state);

const props = defineProps({
  dataFrom: {
    type: Object,
    required: true,
  },
});
onMounted(() => {
  setTimeout(() => {
    console.log(props.dataFrom, "88882222");
    tableList.value = props.dataFrom.financialIndexs;
    workCapital.value = props.dataFrom.workCapital;
    operatingJournals.value = props.dataFrom.operatingJournals;
    otherAssets.value = props.dataFrom.otherAssets;
    if (operatingJournals.value[0].imgPath != null && operatingJournals.value[0].imgPath != "") {
      imgList.value = operatingJournals.value[0].imgPath.split(",");
    } else {
      operatingJournals.value[0].imgPath = "";
      imgList.value = operatingJournals.value[0].imgPath.split(",");
    }
    if (workCapital.value.imgPath != null && workCapital.value.imgPath != "") {
      srcList.value = workCapital.value.imgPath.split(",");
    } else {
      workCapital.value.imgPath = "";
      srcList.value = workCapital.value.imgPath.split(",");
    }
  }, 400);
});
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: left;
  span {
    display: block;
    padding-top: 5px;
    margin-left: 5px;
  }
}

.flexImg {
  width: 100%;
  padding-left: 20px;
  margin-bottom: 5px;
}
.box_flex {
  display: flex;
}
.box {
  margin-right: 20px;
}
.img_box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  line-height: 200px;
  text-align: center;
}

.table-css {
  width: 6%;
  text-align: center;
  font-size: 16px;
  border: 1px solid #f2f2f2;
  :first-child {
    height: 36px;
    line-height: 36px;
    background-color: #f2f2f2;
    margin-bottom: 10px;
  }
  :last-child {
    height: 36px;
    line-height: 36px;
  }
}
.table-last {
  width: 200px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #f2f2f2;
  :first-child {
    box-sizing: border-box;
    height: 36px;
    line-height: 36px;
    background-color: #f2f2f2;
    margin-bottom: 10px;
  }
  :last-child {
    height: 30px;
    line-height: 30px;
  }
}

.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}

:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}

:deep(.el-overlay-dialog) {
  top: 500vh;
}
:deep(.el-aside) {
  margin: 0;
  padding: 0;
  border: 1px solid #dadbdc;
  background: #fff;
}

.title {
  height: 30px;
  line-height: 30px;
  background-color: #ebebeb;
  text-align: center;
}
.pd-5 {
  padding: 5px;
}
:deep(.el-affix) {
  width: 100% !important;
}
</style>
